<template>
  <div>
    <header>
      <span class="map">
        <img src="../images/sunshine.svg" alt />
      </span>
      <van-search
        placeholder="请输入搜索关键词"
        background="#24acf2"
        class="search"
        @click="$router.push('/search')"
      />
      <div
        class="icon iconfont iconwode"
        @click="$router.push('/person')"
      ></div>
    </header>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
header {
  display: flex;
  height: 50/360 * 100vw;
  background-color: #24acf2;
  align-items: center;
  .map {
    img {
      padding-left: 5/360 * 100vw;
      width: 50/360 * 100vw;
      height: 50/360 * 100vw;
    }
  }
  .search {
    flex: 1;
    text-align: center;
    padding-right: 5/360 * 100vw;
    align-items: center;
  }
  .icon {
    color: #fff;
    font-size: 28/360 * 100vw;
    padding-right: 10/360 * 100vw;
    padding-left: 8/360 * 100vw;
  }
}
</style>